<template>
	<!-- 佣金详情 -->
	<view class="bigbox">
		<view class="mt26 boxr pl22 pr22">
			<view class="bannerboxList flex row-between h146 pr40 pb30 pl30 pt36" v-for="(item,index) in data" :key="index">
				<view class="boxList-r flex1 flex row-column row-between">
					<!-- 右边上面的盒子 -->
					<view class="boxList-r-t  flex row-between">
						<text class="boxList-r-id">{{item.remark}}</text>
						<view class="boxList-r-m">
							<!-- <text>佣金：</text> -->
							<text class="boxListNum">+￥{{item.account}}</text>
						</view>
					</view>
					<!-- 右边下面的盒子 -->
					<view class="boxList-r-b flex row-between">
						<text class="boxList-s">{{item.createtime}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				id:'',
				data:[]
			};
		},
		onLoad(opt) {
			console.log(opt)
			this.id = opt.id
			this.commission()
		},
		onReachBottom() {
			this.page++;
			this.commission()
		},
		methods:{
			commission(){
				let data = {
					page: 1,
					size: this.page * 10,
					id:this.id
				}
				this.$api.commissionDetails(data).then(res => {
					this.data = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.bannerboxList {
		border-bottom: 2rpx solid #D2DEEB;;
		.boxList-l {
			.avatar {
				border-radius: 50%;
			}
		}
		.boxList-r {
			.boxList-r-t {
				.boxList-r-id {
					font-size: 26rpx;
					color: #0C162E;
				}
				.boxList-r-m {
					text,
					.boxListNum{
						font-size: 24rpx;
						font-weight: 500;
						color: #6D788B;
					}
					.boxListNum {
						color: #FF2E6D;
					}
				}
			}
			.boxList-r-b {
				.boxList-s {
					font-size: 24rpx;
					font-weight: 500;
					color: #6D788B;
				}
			}
		}
	}
	.bannerboxList:last-child {
		border-bottom: none;
	}
</style>
